<!--
*@Author: QWP
*@Description: 地图中安全生产的详情
*@Date: 2024-11-15 09:09:49
-->
<template>
  <u-drawer v-bind="$attrs"
    title="煤矿详情"
    :maskClosable="true"
    width="40%"
    :forceRender="true"
    :zIndex="2000"
    class="u-coal-detial-drawer">
    <a-layout class="f-h-100">
      <u-table-header style="padding: 0;">
        <u-busi-card title="煤矿信息"
          style="position: relative">
          <u-form :elements="formEls"
            :model="data"
            :gutter="16"
            :loading="loading"
            class="u-security-detial-form"
            ref="formRef">
          </u-form>
          <div class="u-qr-srcurity">
            <b>安全码</b>
            <a-image :src="data.qrCodeUrl" 
              width="60px" >
            </a-image>
          </div>
        </u-busi-card>
      </u-table-header>
      <u-table-content>
        <a-tabs v-model:activeKey="activeKey" 
          type="card"
          class="u-detial-tab-s">
          <a-tab-pane v-for="item in tabs"
            :tab="item.tab"
            :key="item.key"
            >
            <component :is="item.component"
              :collieryCode="data.code">
            </component>
          </a-tab-pane>
        </a-tabs>
      </u-table-content>
    </a-layout>
  </u-drawer>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch, useAttrs, h } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { Image, } from 'ant-design-vue';
import * as enterpriseFileAPI from '@/service/emergency/enterpriseFile';
import { nullC } from '@/util/common';
import PersonOutTimeWarn from '@/views/oa/warning/personnelOvertimeAlarm/Index.vue'
import RegionOutUserWarn from '@/views/oa/warning/regionalOvercrowding/Index.vue'
import LimitRegionWarn from '@/views/oa/warning/restrictedAreasAlarm/Index.vue'
import UserHelp from '@/views/oa/warning/personnelHelp/Index.vue'
import SensorWarn from '@/views/oa/warning/sensorAlarms/Index.vue'

const props = defineProps<{
  data: any,
}>()

const attrs = useAttrs()

const riskOriginTypeOptions = ref([
  { label: '企业自查', value: '1' },
  { label: '政府排查', value: '2' },
  { label: '其他', value: '7' },
]);

const labelWidth = '100px'
const formEls: Array<_IFormEl> = reactive([
  { label: '煤矿名称', key: 'name', col: { span: 24 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '煤矿地址', key: 'address', col: { span: 24 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '煤矿编码', key: 'code', col: { span: 8 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '企业负责人', key: 'master', col: { span: 8 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '煤尘爆炸危险性', key: 'explosionHazard', col: { span: 8 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '水患等级', key: 'floodLevel', col: { span: 8 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '煤矿等级', key: 'gasLevel', col: { span: 8 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '安全生产标准化等级', key: 'standardLevel', col: { span: 8 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
])

const tabs = [
  { key: 'PersonOutTimeWarn', tab: '人员超时报警', component: PersonOutTimeWarn},
  { key: 'RegionOutUserWarn', tab: '区域超员报警', component: RegionOutUserWarn},
  { key: 'LimitRegionWarn', tab: '限制区域报警', component: LimitRegionWarn},
  { key: 'UserHelp', tab: '人员求救', component: UserHelp},
  { key: 'SensorWarn', tab: '传感器报警', component: SensorWarn},
]
const activeKey = ref<string>('PersonOutTimeWarn')

watch(() => attrs.open, (nval, oval) => {
  activeKey.value = tabs[0]['key']
})
</script>

<style lang='scss'>
.u-coal-detial-drawer {
  .ant-drawer-body {
    padding: 0 12px
  }
  .u-qr-srcurity{
    position: absolute; 
    top: -18px; 
    right: 0; 
    display: flex; 
    flex-direction: column;
    justify-content: center;
    b {
      text-align: center;
    }
  }
  .u-security-detial-form {
    .ant-form-item-label {
      font-weight: bold;
    }
  }
  .u-detial-tab-s {
    height: 100%;
    .ant-tabs-content {
      height: 100%
    }
  }
}
</style>